<!-- 库房管理-入库管理-完工报告---查看详情操作 -->
<script lang="ts">
import { reactive, provide, watch, nextTick, ref } from "vue";
import { getBillDetail } from "/@/api/wms/over";
import { errorMessage } from "/@/utils/message";
import scanCode from "/@/components/scanCode/index.vue"; //扫一扫组件
import recommendLocation from "/@/components/recommendLocation/index.vue"; //库位推荐组件
import { getInOutOfBillList } from "/@/api/wms/console";
import completeButton from "/@/components/complete/index.vue"; //完成按钮
import QRCode from "qrcode2";
export default {
  name: "subItemData",
  components: { scanCode, recommendLocation, completeButton },
  props: {
    title: {
      type: String,
      default: "查看详情"
    },
    dialogShow: {
      type: Boolean,
      default: false
    },
    formShow: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    },
    subItemId: {
      type: Number,
      default: 0
    }
  },
  setup(props, ctx) {
    // 入库操作绑定数据
    const subItemData = reactive({
      submitLoading: false,
      title: "", //标题
      formShow: false, //表单显示隐藏
      readonly: false, //是否只读
      subItemId: 0, //操作ID
      dialogShow: false, //操作显示隐藏
      detailData: {} as any
    });
    watch(props, n => {
      // console.log(props);
      subItemData.title = n.title;
      subItemData.dialogShow = n.dialogShow;
      subItemData.formShow = n.formShow;
      subItemData.readonly = n.readonly;
      subItemData.subItemId = n.subItemId;
      if (subItemData.dialogShow) {
        queryList();
      }
    });

    // 查看详情
    const queryList = () => {
      subItemData.submitLoading = true;
      getBillDetail(subItemData.subItemId).then((res: any) => {
        if (res.code === 0) {
          subItemData.detailData = res.data;
          viewStorage();
          nextTick(() => {
            qrCode(
              (res.data?.u9BnoNo ?? "") +
                "|10|" +
                (res.data?.materialCode ?? "")
            );
          });
        } else {
          errorMessage(res.message);
        }
        subItemData.submitLoading = false;
      });
    };

    const subItemClose = () => {
      nextTick(() => {
        subItemData.detailData = {};
        subItemData.submitLoading = false;
      });
      ctx.emit("overItemClose", false);
      subItemData.dialogShow = false;
      subItemData.formShow = false;
    };
    // 完成操作成功之后调的事件
    const completeClose = () => {
      subItemClose();
      ctx.emit("searchEvent");
    };
    const detailData = ref([]);
    const detailDialog = reactive({
      detailEdit: false,
      listQuery: {
        receiptsType: "", //单据类型
        reqNo: "", //单号
        billDetailId: 0 //详情ID
      }
    });
    // 查看存储地点
    const viewStorage = () => {
      detailDialog.listQuery.receiptsType = "WGBGD";
      detailDialog.listQuery.reqNo = subItemData.detailData.bnoNo;
      detailDialog.listQuery.billDetailId = subItemData.detailData.id;
      getInOutOfBillList({ batchNo: subItemData.detailData.batchNo }).then(
        (res: any) => {
          console.log(res);
          if (res.code === 0) {
            detailData.value = res.data;
          }
        }
      );
    };
    provide("subItemData", subItemData);

    const qrCodeDiv = ref(null);
    /* 构建二维码 */
    function qrCode(content) {
      new QRCode(qrCodeDiv.value, {
        width: 124,
        height: 124,
        text: content // 二维码内容
        // render: 'canvas' , // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        // background: '#f0f', // 背景色
        // foreground: '#ff0' // 前景色
      });
    }

    return {
      subItemData,
      queryList,
      subItemClose,
      completeClose,
      detailData,
      qrCode,
      qrCodeDiv
    };
  }
};
</script>
<template>
  <div>
    <!-- 入库操作 -->
    <el-dialog
      v-if="subItemData.dialogShow"
      v-model="subItemData.dialogShow"
      :title="subItemData.title"
      width="80%"
      top="7vh"
      :before-close="subItemClose"
      :close-on-click-modal="false"
    >
      <el-form
        v-if="subItemData.formShow"
        ref="insertForm"
        id="dialogForm"
        :model="subItemData.detailData"
        label-align="right"
        label-width="120px"
      >
        <el-row :gutter="10">
          <el-col :span="18">
            <el-divider content-position="left">单据信息</el-divider>
            <el-row :gutter="10">
              <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
                <el-form-item prop="bnoTypeName" label="单据类型">
                  {{ subItemData.detailData.bnoTypeName }}
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
                <el-form-item prop="bnoNo" label="单号">
                  {{ subItemData.detailData.bnoNo }}
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
                <el-form-item prop="transceiverType" label="收发类型">
                  {{ subItemData.detailData.transceiverType }}
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
                <el-form-item prop="createdTime" label="制单日期">
                  {{
                    subItemData.detailData.createdTime
                      ? subItemData.detailData.createdTime.split(" ")[0]
                      : ""
                  }}
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
                <el-form-item prop="userAccount" label="制单人">
                  {{ subItemData.detailData.userAccount
                  }}{{
                    subItemData.detailData.userName
                      ? "&lt;" + subItemData.detailData.userName + "&gt;"
                      : ""
                  }}
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item prop="scarpReason" label="退库理由">
                  {{ subItemData.detailData.scarpReason }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-divider content-position="left">生产信息</el-divider>
            <el-row :gutter="10">
              <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
                <el-form-item prop="productNo" label="生产订单">
                  {{ subItemData.detailData.productNo }}
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
                <el-form-item prop="batchNo" label="批号">
                  {{ subItemData.detailData.batchNo }}
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
                <el-form-item prop="materialName" label="品名">
                  {{ subItemData.detailData.materialName }}
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
                <el-form-item prop="materialCode" label="料号">
                  {{ subItemData.detailData.materialCode }}
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
                <el-form-item prop="whName" label="存储地点">
                  {{ subItemData.detailData.whName }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-divider content-position="left">库存单位</el-divider>
            <el-row>
              <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
                <el-form-item prop="completeNum" label="完工数量">
                  {{ subItemData.detailData.completeNum
                  }}{{
                    subItemData.detailData.productionUnitCN
                      ? "(" + subItemData.detailData.productionUnitCN + ")"
                      : ""
                  }}
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
                <el-form-item prop="qualifiedNum" label="合格数量">
                  {{ subItemData.detailData.qualifiedNum
                  }}{{
                    subItemData.detailData.productionUnitCN
                      ? "(" + subItemData.detailData.productionUnitCN + ")"
                      : ""
                  }}
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
                <el-form-item prop="scrapNum" label="报废数量">
                  {{ subItemData.detailData.scrapNum
                  }}{{
                    subItemData.detailData.productionUnitCN
                      ? "(" + subItemData.detailData.productionUnitCN + ")"
                      : ""
                  }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-divider content-position="left">成本单位</el-divider>
            <el-row>
              <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
                <el-form-item prop="completeNumWeight" label="完工数量">
                  {{ subItemData.detailData.completeNumWeight
                  }}{{
                    subItemData.detailData.weightUnit
                      ? "(" + subItemData.detailData.weightUnit + ")"
                      : ""
                  }}
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
                <el-form-item prop="qualifiedNumWeight" label="合格数量">
                  {{ subItemData.detailData.qualifiedNumWeight
                  }}{{
                    subItemData.detailData.weightUnit
                      ? "(" + subItemData.detailData.weightUnit + ")"
                      : ""
                  }}
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
                <el-form-item prop="scrapNumWeight" label="报废数量">
                  {{ subItemData.detailData.scrapNumWeight
                  }}{{
                    subItemData.detailData.weightUnit
                      ? "(" + subItemData.detailData.weightUnit + ")"
                      : ""
                  }}
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="6">
            <div
              ref="qrCodeDiv"
              style="
                display: flex;
                justify-content: center;
                align-items: center;
              "
            ></div>
          </el-col>
        </el-row>
        <!-- 扫一扫组件 -->
        <!-- <scan-code
          v-if="subItemData.detailData.finishFlag == 0"
          :btnType="1"
          operation="入库"
          :bnoType="subItemData.detailData.bnoType"
          :bnoNo="subItemData.detailData.bnoNo"
          :tableData="[subItemData.detailData]"
          @queryList="queryList"
        ></scan-code> -->
        <!-- <el-divider style="margin-top: 50px" content-position="left"
          >推荐库位</el-divider
        > -->
        <!-- 推荐库位组件 -->
        <!-- <recommend-location
          :bnoNo="subItemData.detailData.bnoNo"
          :detailId="subItemData.detailData.id"
          :materialCode="subItemData.detailData.materialCode"
          operation="入库"
          :bnoType="subItemData.detailData.bnoType"
        ></recommend-location> -->
      </el-form>
      <template #footer>
        <el-button @click="subItemClose" size="small">取 消</el-button>
        <!-- <complete-button
          v-if="subItemData.detailData.finishFlag == 0"
          :detailId="subItemData.subItemId"
          :receiptsType="subItemData.detailData.receiptsType"
          @close="completeClose"
        >
        </complete-button> -->
      </template>
    </el-dialog>
  </div>
</template>
<style scoped>
@import url("/@/style/dialog.css");
</style>
<style>
.mytable-style .vxe-body--column.col-blue {
  background-color: #60b8ff;
  color: #fff;
}
.mytable-style .vxe-body--column.col-orange {
  background-color: #f56c6c;
  color: #fff;
}
</style>
<style lang="scss" scoped>
.vxe-input + .vxe-button,
.vxe-input + .vxe-button--dropdown,
.vxe-button + .vxe-button,
.vxe-button + .vxe-button--dropdown {
  margin-left: 0;
}

.vxe-toolbar.size--medium {
  padding: 10px;
}

.vxe-table--render-default.size--medium {
  margin-top: 12px;
}

.vxe-button.size--medium.type--button {
  margin-left: 1em;
  height: 32px;
}

.text-model {
  &:hover {
    cursor: pointer;
  }
}
.el-date-editor.el-input__inner,
.el-form-item :deep(.el-date-editor.el-input),
.el-select,
.el-input-number {
  width: 100% !important;
}
// .el-table--fit table tr td:nth-last-child(1) {
//   position: absolute;
// }
</style>
